<template>
  <div id="box">
    <headers></headers>
    <headers2></headers2>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
      <el-menu-item class="allTitle" v-show="changeTitle">全部商品分类</el-menu-item>
      <el-menu-item v-show="!changeTitle" @click="mainPage">首页</el-menu-item>
      <el-menu-item v-for="(item, index) in dataList" :key="index" :class="{ color: num == index }"
        @click="onGetIdx(index)">{{ item.name }}</el-menu-item>
    </el-menu>
    <HomeView></HomeView>
    <router-view></router-view>
  </div>
 
</template>

  
<script>

import HomeView from "@/views/HomeView.vue"
import headers from "@/components/headers/headers.vue"
import headers2 from "@/components/headers/headers2.vue"


export default {
  name: "headers3",
  data() {
    return {
      dataList: [
        { id: 2, name: "戏剧" },
        { id: 3, name: "体育" },
        { id: 4, name: "亲子" },
        { id: 5, name: "舞蹈古典" },
        { id: 6, name: "摇滚" },
      ],

      activeIndex: "1",
      changeTitle: true,
      num: 255,
      // key: "",
    };
  },
  methods: {
    onGetIdx(idx) {
      this.changeTitle = false;
      // console.log(idx);
      this.num = idx;
      // console.log(this.num);
        // this.$router.replace({ path: '/yaogun' })

    },
    mainPage() {
      this.changeTitle = true;
      this.num = 255;
    },
  },
  components: {
    HomeView,
    headers,
    headers2,
  },
  mounted() { },
};
</script>
  
<style scoped>
.allTitle {
  color: white !important;
  font-weight: 700;
  background: #000000 !important;
  text-align: center;
  width: 374px;
}

.color {
  background: #ff3c1c !important;
  color: white !important;
}

.el-menu-demo {}

#box {
  width: 1500px;
  margin: 0 auto;
  /* border: 1px red solid; */
}
</style>
  